<template>
    <div class="goods-image">
        <div class="large" v-show="show" :style="[{backgroundImage:`url(${images[currIndex]})`}, largePosition]"></div>
        <div class="middle" ref="target">
            <img :src="images[currIndex]" alt="">
            <div class="layer" v-show="show" :style="position"></div>
        </div>
        <ul class="small">
            <li v-for="(img, i) in images" :key="img" :class="{active:i===currIndex}">
                <img :src="img" alt="" @mouseenter="currIndex=i">
            </li>
        </ul>
    </div>
</template>
<script>
import {reactive, ref, watch} from 'vue';
import { useMouseInElement } from '@vueuse/core';
export default {
    name:'GoodsImage',
    props:{
        images:{
            type:Array,
            default:()=>[]
        }
    },
    // eslint-disable-next-line
    setup(props) {
        const { currIndex, target, show, position, largePosition } = usePreviewImg()
        return {
            currIndex,
            target,
            show,
            position,
            largePosition
        }
    }
}
const usePreviewImg = () => {
    const currIndex = ref(0)
    const target = ref(null)
    const show = ref(false)

    // 鼠标进入小图，大图显示，小图隐藏
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    const position = reactive({
        left: 0,
        top: 0,
    })

    const largePosition = reactive({
        backgroundPositionX: 0,
        backgroundPositionY: 0,
    })
    watch(() => [elementX, elementY, isOutside], () => {
        if (elementX.value < 100) position.left = 0
        else if (elementX.value > 300) position.left = 200
        else position.left = elementX.value - 100

        if (elementY.value < 100) position.top = 0
        else if (elementY.value > 300) position.top = 200
        else position.top = elementY.value - 100

        // 大背景定位
        largePosition.backgroundPositionX = -position.left * 2 + 'px'
        largePosition.backgroundPositionY = -position.top * 2 + 'px'

        // 遮罩容器定位
        position.left = position.left + 'px'
        position.top = position.top + 'px'

        // 是否预览大图
        show.value = !isOutside.value
    })

    return {
        currIndex,
        target,
        show,
        position,
        largePosition,
    }
}
</script>
<style lang="less" scoped>
.goods-image {
    width: 480px;
    height: 400px;
    position: relative;
    display: flex;
    z-index: 500;
    .large {
        position: absolute;
        top: 0;
        left: 412px;
        width: 400px;
        height: 400px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-repeat: no-repeat;
        background-size: 800px 800px;
        background-color: #f8f8f8;
    }
    .middle {
        width: 400px;
        height: 400px;
        position: relative;
        cursor: move;
        .layer {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, .2);
            left: 0;
            top: 0;
            position: absolute;
        }
    }
    .small {
        width: 80px;
        li {
            width: 68px;
            height: 68px;
            margin-left: 12px;
            margin-bottom: 15px;
            cursor: pointer;
            &:hover,
            &.active {
                border: 2px solid @xtxColor;
            }
        }
    }
}
</style>